﻿@{
    ViewBag.Title = "Загрузка CPU в реальном времени";
}
<div class="count">
    <h1 class="title">Загрузка CPU в реальном времени</h1>

    <p>
        Вы можете наблюдать график загрузки CPU в реальном времени. <br>
        Вернуться <a href="/cpu/">в историю</a> или <a href="/">на главную</a>, где ничего нет.
    </p>

    <script type="text/javascript">
        var chart;
        $(function () {
            $(document).ready(function () {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
                chart = new Highcharts.Chart({
                    chart: {
                        type: 'spline',
                        renderTo: 'graph',
                        animation: Highcharts.svg,
                        marginRight: 10,
                        events: {
                            load: function () {
                                setInterval(requestData, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'График загрузки CPU в реальном времени'
                    },
                    xAxis: {
                        categories: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ]
                    },
                    yAxis: {
                        title: {
                            text: 'Загрузка CPU'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    rangeSelector: {
                        buttons: [
                            { type: 'minute', count: 1, text: '1m' },
                            { type: 'minute', count: 5, text: '5m' },
                            { type: 'minute', count: 15, text: '15m' },
                            { type: 'all', text: 'All' }
                        ],
                        selected: 0
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Загрузка процессора',
                        data: (function () {
                            var data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (var i = 0; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random() * 100,

                                });
                            }
                            return data;
                        })()
                    }]
                });
            });
            function requestData() {
                $.ajax({
                    url: '@Url.Action("/AjaxDisplay/CPU")',
                    type: 'post',
                    dataType: "json",
                    success: function (point) {
                        chart.series[0].setData(eval(point), true, false);
                    },
                    cache: true
                });
            };

        });
    </script>

    <div id="graph" style="width: 750px; height: 400px; margin-bottom: 10px;"></div>
</div>

